<template>
  <router-view v-if="route.matched.length === 3" />
  <div v-else class="am-pm">
    <search @search="handleSearch" @reset="handleReset">
      <div style="display: flex">
        <SearchInput searchText="Name">
          <a-input v-model:value="name" />
        </SearchInput>
        <SearchInput searchText="Branch">
          <a-select
            v-model:value="branch"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.branchOptions" :key="item.id" :label="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Type">
          <a-select
            v-model:value="type"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.typeOptions" :key="item.value" :label="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </search>
    <e-container style="margin-top: 24px">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'totalCount'">
              <a v-if="record['totalCount'] > 0" @click="clickClients(record, 1)">{{ record['totalCount'] }}</a>
              <span v-if="record['totalCount'] === 0">0</span>
            </template>
            <template v-else-if="column.key === 'activeCount'">
              <a v-if="record['activeCount'] > 0" @click="clickClients(record, 2)">{{ record['activeCount'] }}</a>
              <span v-if="record['activeCount'] === 0">0</span>
            </template>
            <template v-else-if="column.key === 'blackListCount'">
              <a v-if="record['blackListCount'] > 0" @click="clickClients(record, 3)">{{ record['blackListCount'] }}</a>
              <span v-if="record['blackListCount'] === 0">0</span>
            </template>
            <template v-else-if="column.key === 'inActiveCount'">
              <a v-if="record['inActiveCount'] > 0" @click="clickClients(record, 4)">{{ record['inActiveCount'] }}</a>
              <span v-if="record['inActiveCount'] === 0">0</span>
            </template>
          </template>
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
        <div v-if="total > 0" class="pagination">
          <a-pagination
            v-model:current="current"
            v-model:pageSize="pageSize"
            :total="total"
            show-less-items
            :show-size-changer="false"
            @change="changeSize"
          />
        </div>
      </a-spin>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import { column } from './column.js'
import ampm from '@/api/ampm'

const route = useRoute()
const router = useRouter()
const name = ref('')
const branch = ref(0)
const type = ref(1)

const current = ref(1)
const pageSize = ref(10)
const total = ref(0)
const data = ref([])
const columns = reactive(column)
const loading = ref(false)

const options = reactive({
  branchOptions: [{ name: 'All', id: 0, type: 2 }],
  typeOptions: [
    // { value: 0, text: 'All' },
    { value: 1, text: 'AM' },
    { value: 2, text: 'PM' }
  ]
})

ampm.getAmPmBranch().then(res => {
  if (res.code === 2000) {
    options.branchOptions = options.branchOptions.concat(res.data)
    branch.value = options.branchOptions[0].id
    getList()
  }
})

const handleSearch = () => {
  current.value = 1
  getList()
}
const handleReset = () => {
  name.value = ''
  branch.value = options.branchOptions[0].id
  type.value = 1
  handleSearch()
}
const getList = () => {
  loading.value = true
  ampm
    .getList({
      name: name.value.trim(),
      branch: branch.value,
      type: type.value,
      page: {
        pageRows: pageSize.value,
        pageIndex: current.value,
        total: 0,
        sort: '',
        order: ''
      }
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
        total.value = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 修改页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 点击客户跳转
 * @param record
 * @param from
 */
const clickClients = (record, from) => {
  router.push({
    path: route.path + '/client-list/',
    query: {
      empID: record.empID,
      type: type.value,
      from: from
    }
  })
}
onMounted(() => {
  // getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
</style>
<route lang="yaml">
name: AM & PM
path: '/am-pm/'
meta:
  title: AM & PM
  roles: isPrimaryCSO
</route>
